/* eslint react/no-string-refs:0 */
import React, { Component } from 'react';
import { Grid, Input, Switch } from '@alifd/next';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';

const { Row, Col } = Grid;

export default class Filter extends Component {
  static displayName = 'Filter';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      value: {},
    };
  }

  filter() {
    this.props.filter(this.state.value)
  }

  onChange(checked) {
    console.log(`switch to ${checked}`);
    let that = this,
      filter = that.filter.bind(this);
    if (checked) {
      let intervalId = setInterval(() => {
        filter();
      }, 3000);

      that.setState({
        intervalId
      })
    } else {
      clearInterval(that.state.intervalId)
    }

  }

  componentWillUnmount = () => {
    clearInterval(this.state.intervalId)
  }

  render() {
    return (
      <div>
        <Row wrap gutter="20" style={styles.formRow}>
          <Col l="6">
            <div style={styles.formItem}>
              <Switch style={{ 'width': '120px' }} checkedChildren="关闭定时刷新" onChange={this.onChange.bind(this)} unCheckedChildren="打开定时刷新" />
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}

const styles = {
  container: {
    margin: '20px',
    padding: '0',
  },
  title: {
    margin: '0',
    padding: '20px',
    fonSize: '16px',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    color: 'rgba(0,0,0,.85)',
    fontWeight: '500',
    borderBottom: '1px solid #eee',
  },
  formRow: {
    padding: '10px 20px',
  },
  formItem: {
    display: 'flex',
    alignItems: 'center',
    margin: '10px 0',
  },
  formItemRight: {
    display: 'flex',
    alignItems: 'center',
    margin: '10px 0',
    float: 'right'
  },
  formComponent: {
    width: '150px',
  },
  formLabel: {
    minWidth: '70px',
  },
  submitButton: {
    marginLeft: '20px',
  },
};
